﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
	<style type="text/css">
		*{padding:0;margin:0;}
		div{margin-bottom:20px;}
	</style>
</head>
<body>
	<div id="chart0" style="height:400px" lazydom="true" showtype="line" class="canvascont" data-id="0"></div>
	<div id="chart1" style="height:400px" lazydom="true" showtype="line" class="canvascont" data-id="1"></div>
	<div id="chart2" style="height:400px" lazydom="true" showtype="bar" class="canvascont" data-id="2"></div>
	<div id="chart3" style="height:400px" lazydom="true" showtype="pie"></div>
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	<script src="../js/lazyChart.js"></script>
	<script type="text/javascript" src="../js/ajax.js"></script>
	<script type="text/javascript" src="../js/swipe.js"></script>
	<script type="text/javascript">
		// 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
		window.onload = function(){
			var chartConfig = [];
			var te = function eConsole(e){
				console.log(e);
			}
			
			chartConfig[0] = {
				url : ["http://apinew.beta.tops001.com/Building/report/CustomerFlower?buildingKid=26&startdate=2015-06-28&source=APPAndroid&token=fe2ac13f5a2a10174afa923db21d0436&adminKid=1801&appkey=1d275522-6647-11e4-a33f-fcaa140b063e&ver=2.5.4&enddate=2015-07-28&type=1&roleKid=28756&deviceId=8dfda9e7-491f-39db-b53b-dbfe1812a8f1","http://apinew.beta.tops001.com/Building/report/CustomerFlower?buildingKid=26&startdate=2015-06-28&source=APPAndroid&token=bc9350495b7acbf152a51c72e3f466ba&adminKid=1801&appkey=1d275522-6647-11e4-a33f-fcaa140b063e&ver=2.5.4&enddate=2015-07-28&type=1&roleKid=28756&chanceInfoCode=F_Source&deviceId=8dfda9e7-491f-39db-b53b-dbfe1812a8f1"],
				option : {
					addDataAnimation : false,
					backgroundColor : "#fff",
					title : {
						text: "测试数据"
					},
					tooltip : {
						trigger: 'axis',
						axisPointer: {
							type: 'none',
						}
					},
					grid : {
						x:40,
						y:50,
						x2:40,
						y2:50,
						borderWidth : 0
					},
					legend: {
						padding: 0,                            
						data: ["测试1","测试2"],
						selected : {
							"测试1" : true,
							"测试2" : false
						}
					},
					xAxis : [
						{
							type : 'category',
							axisLine: {
								show : true,
								onZero : false,
								lineStyle : {
									color : "#999"
								}
							},
							splitLine : {
								show : false
							},
							axisTick: {
								show : false
							},
							boundaryGap : true,
							axisLabel: {
								show :true,
								margin : 8,
								interval : 0,
								formatter : function(s){
									//return s.substring(5);
									return s;
								}
							},
							data : []
						}
					],
					yAxis : [
						{
							axisLine: {
								show : false
							},
						}
					],
					series : [
						{
							type : "line",
							symbol : "emptyCircle",
							symbolSize : 5,
							itemStyle : {
								normal : {
									lineStyle: {
										color : "#fcad03"
									},
									borderColor : "#fcad03"
								}
							}
						}
					],
					extra_kk : {
						showNum : 7,
						addNum : 0
					}
				}
			}
			chartConfig[1] = {
				url : ["http://apinew.beta.tops001.com/Building/report/CustomerFlower?buildingKid=26&startdate=2015-06-28&source=APPAndroid&token=bc9350495b7acbf152a51c72e3f466ba&adminKid=1801&appkey=1d275522-6647-11e4-a33f-fcaa140b063e&ver=2.5.4&enddate=2015-07-28&type=1&roleKid=28756&chanceInfoCode=F_Source&deviceId=8dfda9e7-491f-39db-b53b-dbfe1812a8f1"],
				option : {
					addDataAnimation : true,
					title : {
						text: "测试数据"
					},
					tooltip : {
						trigger: 'axis',
						axisPointer: {
							type: 'none',
						}
					},
					grid : {
						x:40,
						y:50,
						x2:40,
						y2:50,
						borderWidth : 0
					},
					legend : {
						padding: 0,                             
						itemGap: 10,                            
						data: [],
						selected : {}
					},
					xAxis : [
						{
							type : 'category',
							axisLine: {
								show : true,
								onZero : false,
								lineStyle : {
									color : "#999"
								}
							},
							splitLine : {
								show : false
							},
							axisTick: {
								show : false
							},
							boundaryGap : true,
							axisLabel: {
								show :true,
								margin : 8,
								interval : 0
							},
							data : []
						}
					],
					yAxis : [
						{
							axisLine: {
								show : false
							},
						}
					],
					series : [
						{
							type : "line",
							symbol : "emptyCircle",
							symbolSize : 5,
							itemStyle : {
								normal : {
									lineStyle: {
										color : "#fcad03"
									},
									borderColor : "#fcad03"
								}
							}
						}
					],
					extra_kk : {
						showNum : 4,
						addNum : 4
					}
				}
			}; 
			
			chartConfig[2] = {
				url : ["http://apinew.beta.tops001.com/Building/report/CustomerFlower?buildingKid=26&startdate=2015-06-28&source=APPAndroid&token=fe2ac13f5a2a10174afa923db21d0436&adminKid=1801&appkey=1d275522-6647-11e4-a33f-fcaa140b063e&ver=2.5.4&enddate=2015-07-28&type=1&roleKid=28756&deviceId=8dfda9e7-491f-39db-b53b-dbfe1812a8f1"],
				option : {
					addDataAnimation : true,
					title : {
						text: "测试数据"
					},
					grid : {
						x:40,
						y:50,
						x2:40,
						y2:50,
						borderWidth : 0
					},
					legend: {
						padding: 0,                             
						itemGap: 10,                            
						data: [],
						selected : {}
					},
					xAxis : [
						{
							type : 'category',
							axisLine: {
								show : false,
								onZero : false,
								lineStyle : {
									color : "#999"
								}
							},
							splitLine : {
								show : false
							},
							axisTick: {
								show : false
							},
							boundaryGap : true,
							axisLabel: {
								show :true,
								margin : 8,
								interval : 0,
								formatter : function(s){
									return s.substring(5);
								}
							},
							data : []
						}
					],
					yAxis : [
						{
							axisLine: {
								show : false
							},
							splitLine : {
								show : false
							},
						}
					],
					series : [
						{
							type : "bar",
							symbol : "emptyCircle",
							symbolSize : 5,
							itemStyle : {
								normal : {
									lineStyle: {
										color : "#2c82d8"
									},
									borderColor : "#2c82d8",
									label : {
										show :true,
										textStyle : {
											color:"#666"
										}
									}
								}
							},
							barWidth : 25
						}
					],
					extra_kk : {
						event : [
							{
								name : "click",
								handle : te
							}
						],
						showNum : 7,
						addNum : 1
					}
				}
			}
			var te1 = function(e){
				console.log(e);
			}
			chartConfig[3] = {
				url : ["http://apinew.beta.tops001.com/Building/report/CustomerFlower?buildingKid=26&startdate=2015-06-28&source=APPAndroid&token=bc9350495b7acbf152a51c72e3f466ba&adminKid=1801&appkey=1d275522-6647-11e4-a33f-fcaa140b063e&ver=2.5.4&enddate=2015-07-28&type=1&roleKid=28756&chanceInfoCode=F_Source&deviceId=8dfda9e7-491f-39db-b53b-dbfe1812a8f1"],
				option : {
					title : {
						text: "测试",
						x:'center'
					},
					tooltip : {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient : 'vertical',
						x : 'left',			
						data: [],
						selected : {}
					},
					calculable : true,
					series : [
						{
							name:'访问来源',
							type:'pie',
							selectedMode: 'single',
							selectedOffset : 10,
							radius : ['50%', '70%'],
							itemStyle : {
								normal : {
									label : {
										show : false
									},
									labelLine : {
										show : false
									}
								},
								emphasis : {
									label : {
										show : true,
										position : 'center',
										textStyle : {
											fontSize : '30',
											fontWeight : 'bold'
										}
									}
								}
							},
							data:[]
						}
					],
					extra_kk : {
						event : [
							{
								name : "pieSelected",
								handle : te1
							}
						]
					}
				}
			}
			
			require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载,
				'echarts/chart/pie',
				'echarts/chart/line',
            ],function(echart){
				lazyChart.chartInit(echart);
				lazyChart.init(chartConfig);
				window.onscroll = function(){
					lazyChart.init(chartConfig);
				}
				lazyChart.toggleLegend(0);
				Y(".canvascont").on("swipe",
					{
						"leftCallback" : function(){
							lazyChart.addData({index:this.getAttribute("data-id"),dir:"left"});
						},
						"rightCallback" : function(){
							lazyChart.addData({index:this.getAttribute("data-id"),dir:"right"});
						}
					}
				);
			})
		}
	</script>
</body>
</html>